<template>
	<view class="all">
		<view style="width: 100%; height: auto; overflow: hidden;">
			<image class="box" mode="widthFix" src="../../static/image/banner.jpg"></image>
		</view>
		<view v-if="list.length>0">
			<view class="td" v-for="(item,index) in list" :key="index">
				<view class="vlist">
					<view v-for="(photo,ix) in item.photos" :key="ix" class="allimg">
						<image class="imga" :src="srcUrl(photo.path)" style="width: 150rpx; height: 150rpx;"></image>
					</view>
					<view class="name">作品名称:{{item.photos[0].name}}</view>
					<view class="list">
						<view v-if="item.photos[0].create_by==null || item.photos[0].create_by==''">
							<view class="name">作者:暂无作者</view>
						</view>
						<view v-else>
							<view class="name">作者:{{item.photos[0].create_by}}</view>
						</view>
						<view class="name1">时间:{{happenTimeFun(item.photos[0].create_time)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="td1">暂无信息，敬请期待！！！</view>
	</view>
</template>

<script>
	import {
		getFindByPhotos
	} from "@api"
	import Vue from "vue"
	export default{
		"name" : "videoList",
		data()	{
			return	{
				photos:[],
				size:10,
				page:0,
				list:[],
			}
		},
		onLoad(){
			getFindByPhotos({
					page: this.page,
					size: this.size
				})
				.then(res => {
					this.photos = res;
					let list=[];
					let user_id=[];
					let create_time=[];
					//判断
					this.photos.map(item => {
					  if(user_id.indexOf(item.user_id) === -1 || create_time.indexOf(item.create_time) === -1){
						list.push({
						  user_id: item.user_id,
						  create_time: item.create_time,
						  photos: []
						});
						user_id.push(item.user_id);
						create_time.push(item.create_time);
					  }
					})
					list.map(item => {
					 this.photos.map(items => {
					    if(item.user_id == items.user_id && item.create_time == items.create_time){
					      item.photos.push(items)
					    }
					  })
					})
					this.list = list;
				})
		},
		onReachBottom:function(){				//当划到最底部的时候触发事件
				console.log("我是最底部了");
					this.getMoreNews();				//到底之后会触发getMoreNews()函数;
				},
		methods:{
			getMoreNews:function(){						//数据到底,触发这个函数
				this.page = this.page + 1
				uni.showNavigationBarLoading();		//一读取数据,就进行刷新
				getFindByPhotos({
						page: this.page,
						size: this.size
					})
					.then(res => {
						if(res==0){
							this.page = this.page - 1
							uni.stopPullDownRefresh();	//数据加载完成,刷新结束
							uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止
							return false;
						}
						this.photos=this.photos.concat(Array.from(res))
						let list=[];
						let user_id=[];
						let create_time=[];
						//判断
						this.photos.map(item => {
						  if(user_id.indexOf(item.user_id) === -1 || create_time.indexOf(item.create_time) === -1){
							list.push({
							  user_id: item.user_id,
							  create_time: item.create_time,
							  photos: []
							});
							user_id.push(item.user_id);
							create_time.push(item.create_time);
						  }
						})
						
						list.map(item => {
						 this.photos.map(items => {
						    if(item.user_id == items.user_id && item.create_time == items.create_time){
						      item.photos.push(items)
						    }
						  })
						})
						console.log(this.photos);
						
						this.list = list;
						uni.stopPullDownRefresh();	//数据加载完成,刷新结束
						uni.hideNavigationBarLoading();	//数据读取完毕,刷新停止
						})
			},
			srcUrl:function(path){
				return this.$t.URL.image +path;
			},
			
			happenTimeFun(num){//时间戳数据处理
					 let date = new Date(parseInt(num));
					 //时间戳为10位需*1000，时间戳为13位的话不需乘1000
					 let y = date.getFullYear();
					 let MM = date.getMonth() + 1;
					 MM = MM < 10 ? ('0' + MM) : MM;//月补0
					 let d = date.getDate();
					 d = d < 10 ? ('0' + d) : d;//天补0
					 let h = date.getHours();
					 h = h < 10 ? ('0' + h) : h;//小时补0
					 let m = date.getMinutes();
					 m = m < 10 ? ('0' + m) : m;//分钟补0
					 let s = date.getSeconds();
					 s = s < 10 ? ('0' + s) : s;//秒补0
					 return y + '/' + MM + '/' + d; //年月日
				 }
		}
	}
</script>

<style>
	.box {
		width: 100%;
		height: 300rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: cover;
	}
	
	.vlist{
		width: 97%;
	}
	
	.allimg{
		display: inline-flex;
		
	}
	
	.all {
		background-color: #F1F1F1;
	}

	.lunb {
		width: 95%;
		margin-left: 20rpx;


	}

	.list {
		display: flex;
	}

	.img {
		width: 100%;
		height: 300rpx;
		border-radius: 5%;
		margin-top: 10rpx;
	}

	.tit {
		text-align: center;
		width: 300rpx;
		margin-left: 220rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		font-size: 50rpx;
		border-radius: 5%;
		margin-top: 20rpx;
		align-items: center;
	}
	
	.vtd {
		width: 95%;
		background-color: #FFFFFF;
		margin-left: 18rpx;
		border-radius: 5%;
		
	}

	.td {
		width: 95%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		margin-left: 18rpx;
		border-radius: 5%;
		padding-bottom: 15rpx;
		
	}
	.td1{
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		text-align: center;
	}

	.vid {
		margin-left: 18rpx;
		margin-top: 20rpx;
		height: 350rpx;
		width: 95%;
		border-radius: 3%;
		object-fit:fill;
		margin-bottom: 14rpx;
	}

	.name {
		font-size: 27rpx;
		color: #555555;
		margin-left: 20rpx;
	}

	.name1 {
		font-size: 27rpx;
		color: #555555;
		margin-left: auto;
	}

	.imga {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}
</style>
